<template>
  <scroll-view class="page">
  	<view class="fixed">
  		<cu-custom :bgColor="'#000'">
  			<block slot="content">听音乐</block>
  		</cu-custom>
  	</view>
		<view class="page-content">
			<view class="cu-bar search margin-lr-lg">
				<view class="search-form round" @click="InputFocus()">
					<text class="cuIcon-search"></text>
					<input type="text" disabled placeholder="请输入歌手名或歌曲名"></input>
				</view>
			</view>
			<view class="top-list">
				<view class="top-item" v-for="(t,i) in topData" @click="toTopDetail(t,i)">
					<image mode="aspectFill" :src="t.img"></image>
					<view>
						<p>{{ t.name }}</p>
						<text>{{ formatDesc(t.desc) }}</text>
					</view>
				</view>
			</view>
			<view class="page-body">
				<view class="page-section page-section-gap" style="text-align: center;">
					<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
				</view>
			</view>
		</view>
  </scroll-view>
</template>
<script>
export default {
  data() {
    return {
			statusHeight: this.StatusBar,
			topImgs: [
				'http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=150y150',
				'http://p2.music.126.net/GhhuF6Ep5Tq9IEvLsyCN7w==/18708190348409091.jpg?param=150y150',
				'http://p2.music.126.net/aXUPgImt8hhf4cMUZEjP4g==/109951165611417794.jpg?param=150y150',
				'http://p2.music.126.net/fhAqiflLy3eU-ldmBQByrg==/109951165613082765.jpg?param=150y150',
			],
			topData: [
				{
					id: '19723756',
					sou: 'wy',
					img: 'http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=150y150',
					name: '芸芸飙升榜',
					desc: '每日飙升歌曲一览，体会上升最给力的榜首之歌'
				},
				{
					id: '16',
					sou: 'kw',
					img: 'http://p2.music.126.net/GhhuF6Ep5Tq9IEvLsyCN7w==/18708190348409091.jpg?param=150y150',
					name: '小蜗热歌榜',
					desc: '近期热门歌曲榜单，看看哪些被搜索的次数多吧'
				},
				{
					id: '8888',
					sou: 'kg',
					img: 'http://p2.music.126.net/aXUPgImt8hhf4cMUZEjP4g==/109951165611417794.jpg?param=150y150',
					name: '大黄TOP榜',
					desc: '歌曲TOP10、100、500，音乐————天梯'
				},
				{
					id: '4',
					sou: 'tx',
					img: 'http://p2.music.126.net/fhAqiflLy3eU-ldmBQByrg==/109951165613082765.jpg?param=150y150',
					name: '企鹅流行榜',
					desc: '网络流行歌曲排行榜，最流行的歌曲展示'
				},
			],
			current: {
				poster: 'https://p1.music.126.net/UsSAd3Bdf77DjhCuTSEvUw==/109951163077613693.jpg?param=180y180',
				name: '国王与乞丐',
				author: '华晨宇 & 杨宗纬',
				src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dca02685-5bc4-48fa-9961-fd7d02dcb0af/4a6a62a2-1799-4075-97bf-fd8071a247a6.mp3',
			},
			audioAction: {
					method: 'pause'
			}
    };
  },
  onLoad() {
	},
	onShow() {
	},
  mounted() {
  },
  methods: {
		getWyTopList() {
			// let self = this
			// this.topData.splice(0,this.topData.length)
			// this.$http.get('http://212.64.67.168:3001/music/wy/toplist', {}, {}, {})
			// 	.then(res => {
			// 		if (res.code == 200) {
			// 			self.topData.push(res.list[0])
			// 			self.topData.push(res.list[1])
			// 			self.topData.push(res.list[2])
			// 			self.topData.push(res.list[3])
			// 		} else {
			// 			uni.showToast({
			// 				title: '啊哦，数据找不到了',
			// 				icon: 'none'
			// 			});
			// 		}
			// 	})
		},
		formatDesc(desc) {
			if (desc.length > 50) {
				return desc.substring(0,49) + '...'
			} else {
				return desc
			}
		},
		toTopDetail(t,i) {
			this.togo('/pagesEM/music/topdetail', {id: t.id, idx: i, sou: t.sou})
		},
		InputFocus() {
			this.togo('/pagesEM/music/search', {})
		}
	},
};
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		overflow: hidden;
		background-color: #fff;
		.fixed {
			position: fixed;
			z-index: 99;
		}
		.page-content {
			margin-top: 12vh;
			.top-list {
				.top-item {
					display: flex;
					flex-direction: row;
					image {
						flex: 1;
						height: 12vh;
						margin: 30rpx 0 30rpx 50rpx;
					}
					view {
						flex: 2;
						padding: 20rpx;
						p {
							font-weight: bold;
						}
						text {
							font-size: 20rpx;
							color: #555555;
						}
					}
				}
			}
		}
	}
</style>
